How are props passed to a child component?

In Svelte, props are used to pass data from a parent component to a child component. This works similarly to attributes in HTML. To make a variable accessible to a parent, you need to export it in the child component.

Use the export keyword inside the <script> block of the child component to declare props.

Child Component: Button.svelte

Here, the label variable is exported. This allows the parent component to set its value when using the Button component.

In the parent component, pass data to the child component using an attribute-like syntax.

Parent Component: App.svelte

Here, the label prop is set dynamically using values from the parent component's variables.

You can also pass expressions or computed values directly to a prop, without needing to store them in a separate variable.

Example with Inline Expression

Important Notes About Props in Svelte:

Use the export keyword in the child component to declare props.
Props are passed from the parent as attributes, similar to HTML.
Default values can be assigned to props in the child component.
Props are one-way data flow, meaning changes in the child won't automatically update the parent.

Question Loading...